import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar, DLookImages } from '@/components'
import { AtButton, AtList, AtListItem } from 'taro-ui'
import './contractprooftran.scss'
import http from '@/api'
const itembg = require('../assets/pic@2x.png')
const conf = require('../../../config/conf')

export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      status: '',
      firstList: [],
      secondList: [],
      threeList: [],
      id: '',
      companycar: {
        itemStatus: false,
        itemUrl: ''
      }
    }
  }
  componentDidShow() {
    this.getChooiseBankCode()

    const { remark, id } = this.$router.params
    if (remark == 1) {
      http.confirmUserList({ id: `${id}` }).then((res) => {
        Taro.showToast({
          title: '提交成功',
          duration: 800,
          mask: true
        }).then(() => {
          setTimeout(() => {
            Taro.redirectTo({
              // url: `/pages/itemdetail/itemdetail?id=${this.$router.params.id}&status=41`
              url: `/pages/consignment/consignment?active=3`
            })
          }, 1000)
        })
      })
    }
  }
  getChooiseBankCode() {
    let loc = JSON.parse(localStorage.getItem('chooiseBankList'))
    if (loc) {
      let chooiseBankCode = loc.cardNumber + ' ' + loc.belongToBank
      this.setState({
        chooiseBankCode,
        bankInfo: {
          bankName: loc.belongToBank,//银行名称
          bankNo: loc.cardNumber,//string
          bankUserName: loc.cardholderName
        }
      })
    }
  }
  onChangeChooiseBank() {
    Taro.navigateTo({
      url: '/pages/userbank/userbank?ty=1'
    })
  }
  componentWillMount() {
    let { id, status } = this.$router.params
    this.setState({
      status,
      id
    })
    this.checkPactPhoto(id)

  }
  checkPactPhoto(id) {
    http.checkPactPhoto({ id: `${id}` }).then(res => {
      if (!res) {
        return
      }
      let { firstList, secondList, threeList } = this.state
      res.files.map(item => {

        if (item.otfType === '6') {
          firstList.push({
            url: `${item.otfUrl}`
          })
        }
        if (item.otfType === '7') {
          secondList.push({
            url: `${item.otfUrl}`
          })
        }
        if (item.otfType === '8') {
          threeList.push({
            url: `${item.otfUrl}`
          })
        }
      })
      this.setState({
        firstList,
        secondList,
        threeList,
      })
    })
  }
  handleFinish() {
    let { id } = this.state
    http.buyersConfirm3(id).then(res => {
      if (res === 0) {
        Taro.showToast({
          title: '该合同已确认',
          icon: 'none',
          duration: 800
        })
        setTimeout(() => {
          Taro.reLaunch({
            url: "/pages/consignment/consignment?active=4"
          })
        }, 800);
      } else {
        this.confirmUserList(id)
      }
    })
  }
  confirmUserList(id) {
    http.confirmUserList2({ id: `${id}` }).then(({ bodyData, infoData, signData }) => {
      Taro.showToast({
        title: '提交成功',
        duration: 800,
        mask: true
      }).then(() => {
        this.setState({
          bodyData, infoData, signData
        }, () => {
          this.refs.submit.click()
        })
      })
    })
  }
  onLookHandle(url, i, arr) {
    if (window.bridge && arr.length > 0) {
      let _images = []
      arr.map(item => {
        _images.push(item.imgAliyunUrl)
      })
      window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
    } else {
      this.setState({
        companycar: {
          ...this.state.companycar,
          itemStatus: true,
          itemUrl: url
        }
      })
    }
  }

  onLookItem() {
    this.setState({
      companycar: {
        ...this.state.companycar,
        itemStatus: false,
        itemUrl: ''
      }
    })
  }
  render() {
    const {
      status,
      firstList,
      secondList,
      threeList,
      companycar,
      infoData,
      bodyData,
      signData
    } = this.state
    return (
      <View className='b_contractprooftran'>
        <DNavBar title='合同凭证'></DNavBar>
        <View className='b_contractprooftran__box'>
          {/* <View className="b_contractprooftran__tips">
                  <Text>请耐心等待，平台管理员将会在3个工作日内审核您的申请</Text>
              </View> */}
        </View>
        <View className='b_contractprooftran__images'>
          <View className="b_contractprooftran__images_enterpris">
            <View className='b_contractprooftran__images_enterpris_item'>
              <Text className='item_title'>车辆运输合同</Text>
              {firstList &&
                firstList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, firstList)}></Image>
                })
              }

            </View>
            <View className="b_contractprooftran__images_enterpris_item">
              <Text className="item_title">车辆交接凭证</Text>
              {
                secondList &&
                secondList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, secondList)}></Image>
                })
              }
            </View>
            <AtList>
              <AtListItem iconInfo={{ size: 20, color: '#FF4949', value: 'star_', }} title='请选择银行卡' onClick={this.onChangeChooiseBank.bind(this)} note={this.state.chooiseBankCode} arrow='right' >

              </AtListItem>
            </AtList>
            {threeList &&
              <View className="b_contractprooftran__images_enterpris_item">
                <Text className="item_title">其他</Text>
                {
                  threeList.map((item, i) => {
                    return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, threeList)}></Image>
                  })
                }
              </View>
            }
          </View>
        </View>
        <View className='b_contractprooftran__footer'>
          {status === '1' &&
            <AtButton className='item_btn' onClick={this.handleFinish.bind(this)}>交易完成</AtButton>
          }
        </View>
        <DLookImages status={companycar.itemStatus} url={companycar.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>

        {/* 跳转龙存管页面 */}
        <form action={conf.fromURL} method="post">
          <input type="hidden" name="INFO" value={infoData} />
          <input type="hidden" name="CONTENTTYPE" value="json" />
          <input type="hidden" name="charset" value="GBK" />
          <input type="hidden" name="BODY" value={bodyData} />
          <input type="hidden" name="SIGN" value={signData} />
          <input type="submit" ref="submit" value="Submit" style={{ opacity: 0, width: 0, height: 0 }} />
        </form>
      </View>
    )
  }
}
